<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!-- 1. stop修饰符的使用
                    - div有一个点击时间，div中的button有一个点击时间
                    需求：点击按钮的时候不会调用div的点击事件
                    解决：如下，给click添加stop属性即可
            -->
            <div @click="divClick">
                aaaaaaaaaaaaaaaa
                <button @click.stop="btnClick">一个按钮</button>
            </div>

            <!-- 2. prevent修饰符的使用 
                    使用这个修饰符可以组织组件的默认方法
                    比如这里加了这个修饰符以后就不会提交了
            -->
            <form action="baidu">
                <input type="submit" value="提交" @click.prevent="submit"/>
            </form>

            <!-- 3. 监听某个键帽的点击
                    - 任何键帽弹起都会调用方法
                    - enter弹起会触发按钮
            -->
            <input type="text" @keyup="keyup" />
            <input type="text" @keyup.enter="keyup" />

            <!-- 4. once修饰符，第一次点的时候有用，之后就没用了 -->
            <button @click.once="onceUseBtn">第一次点有用</button>

        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {

                },
                methods: {
                    divClick() {
                        console.log("divClick")
                    },
                    btnClick() {
                        console.log("btnClick")
                    },
                    submit() {
                        console.log("submit")
                    },
                    keyup() {
                        console.log("keyup")
                    },
                    onceUseBtn() {
                        console.log("firstTime")
                    }
                },
            })
        </script>
    </body>
</html>